
<template>
  <view class="login-container">
    <view class="login-header">
      <image class="login-logo" :src="logoUrl" mode="aspectFit" />
      <text class="login-title">高考查分助手</text>
    </view>

    <view class="login-form">
      <view class="input-group">
        <uni-icons type="person" size="20" color="#666"></uni-icons>
        <input class="input-field" type="text" v-model="data.username" placeholder="请输入账号"
          placeholder-class="placeholder" />
      </view>

      <view class="input-group">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input class="input-field" :type="showPassword ? 'text' : 'password'" v-model="data.password" placeholder="请输入密码"
          placeholder-class="placeholder" />
        <view class="password-toggle" @click="togglePasswordVisibility">
          <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#666"></uni-icons>
        </view>
      </view>

      <button class="login-button" @click="handleLogin">登录</button>

      <view class="helper-links">
        <text class="helper-text" @click="handleForgetPassword">忘记密码</text>
        <text class="helper-text" @click="handleRegister">注册账号</text>
      </view>
    </view>

    <view class="footer">
      <text class="footer-text">版权所有 © 2024 高考查分助手</text>
    </view>
    <u-toast ref="uToastRef"></u-toast>
  </view>
</template>

<script lang="ts" setup>
import { reqUserLogin } from "@/api/user"
import { ref, reactive } from "vue"
import useUserStore from "@/store/module/user"
const userStore = useUserStore()
const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/e84b3bc148fdec5c569dff07b3837f5b.jpg';

const data = reactive({
  username: "",
  password: "",
})
const uToastRef = ref(null)
const showPassword = ref(false);

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const handleLogin = async () => {
  if (!data.username || !data.password) {
    uni.showToast({
      title: '请输入账号和密码',
      icon: 'none'
    });
    return;
  }
  if (uni.getSystemInfoSync().platform !== "小程序") {
    const query = {
      username: data.username,
      password: data.password,
      user_code: '1',
    }
    try {
      await userStore.getLogin(query)
      uToastRef.value.show({
        message: "登录成功",
        type: "success",
        duration: 2000,
        iconUrl: "https://cdn.uviewui.com/uview/demo/toast/success.png",
      })
      uni.switchTab({
        url: "/pages/index/index",
      })
    } catch (error) {
      console.log(error)
      uToastRef.value.show({
        message: error,
        type: "error",
        duration: 2000,
        iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
      })
      resetIpt()
    }
    return
  }
  uni.login({
    success: async (result) => {
      const query = {
        username: data.username,
        password: data.password,
        user_code: result.code,
      }
      try {
        await userStore.getLogin(query)
        uToastRef.value.show({
          message: "登录成功",
          type: "success",
          duration: 2000,
          iconUrl: "https://cdn.uviewui.com/uview/demo/toast/success.png",
        })
        uni.switchTab({
          url: "/pages/index/index",
        })
      } catch (error) {
        console.log(error)
        uToastRef.value.show({
          message: error,
          type: "error",
          duration: 2000,
          iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
        })
        resetIpt()
      }
    },
    fail: (error) => {
      uToastRef.value.show({
        message: "系统异常，稍后再试",
        type: "error",
        duration: 2000,
        iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
      })
    },
  })

};

const handleForgetPassword = () => {
  uni.showToast({
    title: '忘记密码功能开发中',
    icon: 'none'
  });
};

const handleRegister = () => {
  uni.redirectTo({
    url: "/pages/reg/index",
  })
};
</script>

<style scoped>
page {
  height: 100%;
}

.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 60rpx;
  background-color: #ffffff;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.login-logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.login-title {
  font-size: 32px;
  color: #333333;
  font-weight: bold;
}

.login-form {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background-color: #f5f5f5;
  border-radius: 50rpx;
}

.input-field {
  flex: 1;
  height: 100rpx;
  margin-left: 20rpx;
  font-size: 14px;
  color: #333333;
}

.placeholder {
  color: #999999;
  font-size: 14px;
}

.password-toggle {
  padding: 20rpx;
}

.login-button {
  width: 100%;
  height: 100rpx;
  margin-top: 60rpx;
  background-color: #4a90e2;
  color: #ffffff;
  font-size: 16px;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-button:active {
  opacity: 0.8;
}

.helper-links {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.helper-text {
  color: #666666;
  font-size: 14px;
}

.footer {
  position: absolute;
  bottom: 60rpx;
  width: 100%;
  text-align: center;
}

.footer-text {
  color: #999999;
  font-size: 12px;
}
</style>

